<template>
  <div class="">
  <el-tabs v-model="activeName">
    <el-tab-pane label="视频客服全局设置" name="videoWebsiteAccess">
      <div class="video-content">
        <p>{{$t('config.channel.videoWebsiteMessage')}}</p>
        <div class="title">视频客服设置</div>
        <el-form label-position="right" ref="form" class="form">
          <el-form-item label="网站/wap/H5/访客端：" label-width="150px">
            <el-switch v-model="formDataClone.videoChatOn" @change='videoChatOnChange'>
            </el-switch>
            <el-checkbox v-if="formDataClone.videoChatOn" class='checkout' v-model="formDataClone.videoChatOnIm">允许访客主动邀请</el-checkbox>
          </el-form-item>
          <el-form-item label="移动app：" label-width="150px">
            <el-switch v-model="formDataClone.mobileVideoChat" @change='mobileVideoChatChange'>
            </el-switch>
            <el-checkbox v-if="formDataClone.mobileVideoChat" class='checkout' v-model="formDataClone.mobileVideoChatIm">允许访客主动邀请</el-checkbox>
          </el-form-item>
          <el-form-item v-if="videoRecordShow" :label="this.$t('config.channel.useVideoRecord')" label-width="150px">
            <el-switch v-model="formDataClone.videorecord">
            </el-switch>
          </el-form-item>
        </el-form>
        <!-- <div class="title">其他功能设置</div> -->
        <!-- <el-form label-position="right" ref="formData" class="form">
          <el-form-item label="是否启用屏幕共享:" label-width="150px">
            <el-switch v-model="formDataClone.shareScreen">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否启用屏幕共享录制:" label-width="150px">
            <el-switch v-model="formDataClone.shareScreenRecord">
            </el-switch>
          </el-form-item>
        </el-form> -->
        <div>
          <el-button type="primary primary_btn" v-on:click="videoSetting">{{$t('config.channel.saveSettings')}}</el-button>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        activeName: 'videoWebsiteAccess',
        formData: {
          videoChatOn: true,
          videoChatOnIm: true,
          mobileVideoChat: true,
          mobileVideoChatIm: true,
          videorecord: true,
          // shareScreen: false,
          shareScreenRecord: false
        },
        videoRecordShow: false,
        formDataClone: {},
        globaldata: ''
      }
    },
    methods: {
      changeMenu (value) {
        this.activeName = value
      },
      setVideo (data) {
        var dataObj = deepClone(data)
        dataObj.videoChatOn = data.videoChatOn ? '1' : '0'
        dataObj.videoChatOnIm = data.videoChatOnIm ? '1' : '0'
        dataObj.mobileVideoChat = data.mobileVideoChat ? '1' : '0'
        dataObj.mobileVideoChatIm = data.mobileVideoChatIm ? '1' : '0'
        dataObj.videorecord = data.videorecord ? '1' : '0'
        // dataObj.shareScreen = data.shareScreen ? '1' : '0'
        dataObj.shareScreenRecord = data.shareScreenRecord ? '1' : '0'
        
        this.$store.dispatch('saveGlobalSet', dataObj).then((rep) => {
          if (rep.success) {
            this.$message.success(this.$t('config.channel.configSuccess'))
          } else {
            this.$message.error(this.$t('qualityCheck.saveFali'))
          }
        })
      },
      videoSetting () {
        this.setVideo(this.formDataClone)
      },
      videoChatOnChange (data) {
        if (data) {
          this.formDataClone.videoChatOnIm = true
        }
      },
      mobileVideoChatChange (data) {
        if (data) {
          this.formDataClone.mobileVideoChatIm = true
        }
      }
    },
    mounted () {
      let data = {}
      this.formDataClone = deepClone(this.formData)
      this.$store.dispatch('getGlobalSetById', data).then((resp) => {
        if (resp.success) {
          let row = resp.row || {}
          console.log(row)
          this.formDataClone._id = row._id || ''
          if (row) {
            if (row.videoChatOn === '1') {
              this.formDataClone.videoChatOn = true
            } else {
              this.formDataClone.videoChatOn = false
            }
            if (typeof row.videoChatOnIm === 'string') {
              if (row.videoChatOnIm === '1') {
                this.formDataClone.videoChatOnIm = true
              } else {
                this.formDataClone.videoChatOnIm = false
              }
            } else {
              this.formDataClone.videoChatOnIm = true
            }
            

            if (row.mobileVideoChat) {
              if (row.mobileVideoChat === '1') {
                this.formDataClone.mobileVideoChat = true
              } else {
                this.formDataClone.mobileVideoChat = false
              }
            } else {
              if (row.mobileVideoChat === '1') {
                this.formDataClone.mobileVideoChat = true
              } else {
                this.formDataClone.mobileVideoChat = false
              }
            }

            if (typeof row.mobileVideoChatIm === 'string') {
              if (row.mobileVideoChatIm === '1') {
                this.formDataClone.mobileVideoChatIm = true
              } else {
                this.formDataClone.mobileVideoChatIm = false
              }
            } else {
              this.formDataClone.mobileVideoChatIm = true
            }
            
            if (row.videorecord === '1') {
              this.formDataClone.videorecord = true
            } else {
              this.formDataClone.videorecord = false
            }
            // if (row.shareScreen === '1') {
            //   this.formDataClone.shareScreen = true
            // } else {
            //   this.formDataClone.shareScreen = false
            // }
            if (row.shareScreenRecord === '1') {
              this.formDataClone.shareScreenRecord = true
            } else {
              this.formDataClone.shareScreenRecord = false
            }
          }
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .video-content
    padding 20px 15px
    p
      color $c-prompt
    .radioBox
      padding 18px 0 20px
    .submitBtn
      margin-top 20px
  .title
    font-weight 900
    font-size 14px
    margin-top 10px
  .checkout
    margin-left 30px
</style>
